<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>08内置控件</title>
    <link href="../../../css/bootstrap.min.css" rel="stylesheet">
    <script src="../../../js/jquery-2.1.1.js"></script>
    <script src="../../../js/bootstrap.min.js"></script>
</head>
<body>
1.缩略图（一） <br/>
<div class="container">
<div class="row">
    <div class="col-xs-6 col-md-3">
        <a href="#" class="thumbnail">
            <img src="image1.png" style="height: 180px; width: 100%; display: block;" alt="">
        </a>
        <div class="caption">
            <h3>Bootstrap框架系列教程</h3>
            <p>Bootstrap框架是一个优秀的前端框，就算您是一位后端程序员或者你是一位不懂设计的前端人员，你也能依赖于Bootstrap制作做优美的网站...</p>
            <p>
                <a href="##" class="btn btn-primary">开始学习</a>
                <a href="##" class="btn btn-info">正在学习</a>
            </p>
        </div>
    </div>
</div>
</div>
<hr/>
<div class="alert alert-success" role="alert">恭喜您操作成功！</div>
<div class="alert alert-info" role="alert">请输入正确的密码</div>
<div class="alert alert-warning" role="alert">您已操作失败两次，还有最后一次机会</div>
<div class="alert alert-danger" role="alert">对不起，您输入的密码有误</div>
<br/>
<div class="alert alert-success alert-dismissable" role="alert">
<button class="close" type="button" data-dismiss="alert">&times;</button>
恭喜您操作成功！
</div>
原理分析：在样式上，需要在基本警示框“alert”的基础上添加“alert-dismissable”样式

<div class="alert alert-success" role="alert">
    <strong>Well done!</strong>
    You successfully read
    <a href="#" class="alert-link">this important alert message</a>
</div>
3.进度条
<div class="progress">
    <div class="progress-bar progress-bar-success" style="width:40%">progress-bar-success</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-info" style="width:60%">progress-bar-info</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-warning" style="width:80%">progress-bar-warning</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-danger" style="width:50%">progress-bar-danger</div>
</div>

<div class="progress progress-striped">
    <div class="progress-bar progress-bar-success" style="width:40%">progress-striped progress-bar-success</div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-info" style="width:60%">progress-striped progress-bar-info</div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-warning" style="width:80%">progress-striped progress-bar-warning</div>
</div>
<div class="progress progress-striped">
    <div class="progress-bar progress-bar-danger" style="width:50%">progress-striped progress-bar-danger</div>
</div>
<div class="progress progress-striped active">
    <div class="progress-bar progress-bar-success" style="width:40%">progress-striped progress-bar-success</div>
</div>
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>
4.媒体对象
<div class="progress">
    <div class="progress-bar progress-bar-success"  role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width:20%">20%</div>
</div>

5.面板–带有头和尾的面板
<br/>? panel-heading：用来设置面板头部样式
<br/>? panel-footer：用来设置面板尾部样式
<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">…</div>
    <div class="panel-footer">作者：大漠</div>
</div>
面板–面板中嵌套表格

一般情况下可以把面板理解为一个区域，在使用面板的时候，都会在panel-body放置需要的内容，可能是图片、表格或者列表等。来看看面板中嵌套表格和列表组的一个效果。首先来看嵌套表格的效果：

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <table class="table table-bordered">
            <thead>
            <tr>
                <th>＃</th>
                <th>我的书</th>
                <th>发布时间</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>1</td>
                <td>《图解CSS3》</td>
                <td>2014-07-10</td>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
<hr/>
面板–面板中嵌套列表组

在上一节，我们介绍了如何在面板中放置表格，现在我们来学习如何在面板中放置列表组，我们简单的来看一个示例：

<div class="panel panel-default">
    <div class="panel-heading">图解CSS3</div>
    <div class="panel-body">
        <p>详细讲解了选择器、边框、背景、文本、颜色、盒模型、伸缩布局盒模型、多列布局、渐变、过渡、动画、媒体、响应Web设计、Web字体等主题下涵盖的所有CSS3新特性
        </p>
        <ul class="list-group">
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
            <li class="list-group-item">我是列表项</li>
        </ul>
    </div>
    <div class="panel-footer">作者：大漠</div>
</div>
</body>
</html>